import React , { Suspense } from 'react';
import { BrowserRouter as Router , Switch } from "react-router-dom";
import { Redirect } from 'react-router-dom';
import { RouteEX } from '@ui/RouteEX';
import Loading from '@ui/Loading';

interface IProps {
    config: IRouterTypes.IRoutersConfig[];
    level: number;
}

export class Routers extends React.Component<IProps> {
    public render() {
        const { config , level } = this.props;
        return (
            level === 1 ?  <Router>
                <Suspense fallback={Loading()}>
                    <Switch>
                        {
                            config.map(route => {
                                return <RouteEX key={route.name} path={route.path} exact={route.exact} component={route.component} />
                            })
                        }
                    </Switch>
                </Suspense>
            </Router> : <Suspense fallback={Loading()}>
                <Switch>
                    {
                        config.map(route => {
                            return <RouteEX key={route.name} path={route.path} exact={route.exact} component={route.component} />
                        })
                    }
                    <Redirect path="/" to={{pathname: '/home'}} />
                </Switch>
            </Suspense>
        )
    }
}